<template>
    <div>
        <!-- 进出站管理-进站登记 -->
        <div class="container">
            <div class="content">
                <el-row>
                    <el-col :span="24">
                        <!--车辆信息S-->
                        <div class="left-choose lf" style="margin-left: 10px;">
                            <img src="../../assets/imgs/operation_bg_biaoti_default.png" alt="" class="lf"><div class="lf title">车辆基本信息</div>
                        </div>
                        <!--车辆信息S-->
                    </el-col>

                    <el-form ref="form" label-width="80px">
                        <el-col :span="4">
                            <el-form-item label="车牌号" label-width="85px">
                                <el-autocomplete v-model="cardCodeTips" placeholder="" size="mini" :fetch-suggestions="querySearchCode"></el-autocomplete>
                            </el-form-item>
                        </el-col>
                        <el-form-item label="车上已有人数" label-width="70px" class="lf" style="margin-left: 20px;">
                            <el-input v-model="cardStyle" style='width: 110px;' size="mini"></el-input>
                        </el-form-item>
                        <el-form-item label="座位" label-width="70px" class="lf" style="margin-left: 20px;">
                            <el-input v-model="passenge" style='width: 120px;' size="mini" readonly></el-input>
                        </el-form-item>
                        <el-form-item label="装备等级" label-width="70px" class="lf" style="margin-left: 20px;">
                            <el-input v-model="grade" style='width: 120px;' size="mini" readonly></el-input>
                        </el-form-item>
                        <el-form-item label="审验有效期" label-width="70px" class="lf" style="margin-left: 20px;">
                            <el-input v-model="lineNum" style='width: 120px;' size="mini" readonly></el-input>
                        </el-form-item>
                        <el-form-item label="业户名称" label-width="70px" class="lf" style="margin-left: 20px;">
                            <el-input v-model="unitNumbe" style='width: 130px;' size="mini" readonly></el-input>
                        </el-form-item>
                        <el-form-item label="标志牌号码" label-width="68px" class="lf" style="margin-left: 20px;">
                            <el-input v-model="roadNumbe" style='width: 130px;' size="mini" readonly></el-input>
                        </el-form-item>
                        <el-form-item label="线路名称" label-width="70px" class="lf" style="margin-left: 20px;">
                            <el-input v-model="operateName" style='width: 130px;' size="mini" readonly></el-input>
                        </el-form-item>
                        <el-form-item label="途径线路" label-width="70px" class="lf" style="margin-left: 20px;">
                            <el-input v-model="examination" style='width: 120px;' size="mini" readonly></el-input>
                        </el-form-item>
                        <el-form-item label="道路运输证号" label-width="80px" class="lf" style="margin-left: 20px;">
                            <el-input v-model="deadline" style='width: 130px;' size="mini" readonly></el-input>
                        </el-form-item>
                        <el-form-item label="配客站点" label-width="90px" class="lf" style="margin-left: 20px;">
                            <el-input v-model="dueDate" style='width: 130px;' size="mini" readonly></el-input>
                        </el-form-item>
                        <el-form-item label="备注" label-width="90px" class="lf">
                            <el-input v-model="remarks" style='width: 200px;' size="mini"></el-input>
                        </el-form-item>

                    </el-form>

                </el-row>

                <div class="car-items">
                    <button class="transport preserve rf" @click="safeLoginMess"><i class="lf"></i><span class="lf">保存进站信息</span></button>
                    <button class="transport read rf"><i class="lf"></i><span class="lf">读取道路运输证信息</span></button>
                </div>


            </div>
        </div>

        <div class="lists">
            <button @click="renovate" class="rf renovate">刷新</button>
            <!-- 数据表格 -->
            <el-row>
                <el-col :span="24">
                    <avue-crud @current-change="rowChange" :data="carData"  :page="page" :option="dataForm"></avue-crud>
                </el-col>
            </el-row>
        </div>

    </div>
</template>

<script>
import "../../assets/js/jquery.js";
// import TableData from "../../components/common/tableData";
// import qs from "qs";


export default {
    data: function(){
        return {
            cardCodeTips: "",
            cardStyle: "",
            passenge: "",
            grade: "",
            lineNum: "",
            unitNumbe: "",
            roadNumbe: "",
            operateName: "",
            examination: "",
            deadline: "",
            dueDate: "",
            remarks: "",
            page: {
                pageSizes: [10],//分页信息
                total: 20,//总页数
                currentPage: 1,//当前第几页
                pageSize: 10,//每一页加载多少条数据
            },
            carData:[],
            dataForm:{
                page:true,
                align:'center',
                addBtn:false,//是否添加按钮
                delBtn:false,//是否添加删除按钮
                editBtn:false,//是否添加编辑按钮
                menu:false,//是否添加菜单按钮
                column:[
                    {
                        sortable:true,
                        label:'进站时间',
                        prop:'create_time',
                    },
                    {
                        label:'车牌号',
                        prop:'vehi_no',
                    },
                    {
                        label:'已有人数',
                        prop:'che_shang_yi_you_ren_shu'
                    }
                ]
            }
        }
    },
    methods:{
        loadAll() {
            return [ ];
        },
        //获取车牌
        searchCode(){
            this.postRequest("/sch/data/bus_vehicle/listWithSpell")
                .then(target => {
                    // console.log(target.data);
                    var tag = target.data;
                    for(var i=0;i<tag.length;i++){
                        // console.log(tag[i].vehi_no);
                        // console.log(this.loadAll.value);
                        this.restaurants.push({"value":tag[i].vehi_no});
                    }
                });
        },
        //获取焦点车牌号自动下拉提示
        querySearchCode(queryString, cb) {
            var restaurants = this.restaurants;
            var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
            // 调用 callback 返回建议列表的数据
            cb(results);
        },
        createFilter(queryString) {
            return (restaurant) => {
                return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        getCardMess(){
            this.getRequest("/sch/data/bus_vehicle/info?vehino="+this.cardCodeTips)
                .then(target => {
                    console.log(target);
                    // console.log(target.data);
                    var tag = target.data;
                    this.cardStyle = tag.che_liang_lei_xing;//车型
                    this.passenge = tag.all_seat;//核定载位
                    this.grade = tag.ji_shu_deng_ji;//技术等级
                    this.lineNum = tag.xlbzph;//线路牌号
                    this.unitNumbe = '后台暂时没返回';//营运单位编号
                    this.roadNumbe = tag.dao_lu_yun_shu_zheng_hao;//道路运输证号
                    this.operateName = tag.cust_name;//营运单位名称
                    this.examination = tag.shen_yan_you_xiao_qi;//审验有效日期
                    this.deadline = tag.level2ndmaintenanceenddate;//二级维护截止日期
                    this.dueDate = tag.liabilityinsuranceenddate;//承运人责仁险截止日期
                    this.remarks = tag.bei_zhu;//承运人责仁险截止日期
                });
        },
        safeLoginMess(){
            /*测试数据*/// this.$http.get("/stationmanage/inbound/bus/add?busPlanInBoundLog.vehi_no=%E7%B2%A4A12345&busPlanInBoundLog.che_shang_yi_you_ren_shu=31&zuo_wei=&zhuang_bei_deng_ji=&ji_shu_deng_ji=&shen_yan_you_xiao_qi=2099-12-31&ye_hu_ming_cheng=&biao_zhi_pai_hao_ma=&xian_lu_ming_cheng=&tu_jing_xian_lu=&dao_lu_yun_shu_zheng_hao=&pei_ke_zhan_dian=&busPlanInBoundLog.bei_zhu=")
            this.getRequest('/stationmanage/inbound/bus/add?busPlanInBoundLog.vehi_no='+this.cardCodeTips+'&busPlanInBoundLog.che_shang_yi_you_ren_shu='+this.cardStyle+'&zuo_wei='+this.passenge+'&zhuang_bei_deng_ji='+this.grade+'+&ji_shu_deng_ji=&shen_yan_you_xiao_qi='+this.lineNum+'&ye_hu_ming_cheng='+this.unitNumbe+'&biao_zhi_pai_hao_ma='+this.roadNumbe+'&xian_lu_ming_cheng='+this.operateName+'&tu_jing_xian_lu='+this.examination+'&dao_lu_yun_shu_zheng_hao='+this.deadline+'&pei_ke_zhan_dian='+this.dueDate+'&busPlanInBoundLog.bei_zhu='+this.remarks)
                .then(target => {
                    console.log(target);
                    this.$message({
                        showClose: true,
                        message: target.data[1],
                        type: 'success'
                    });
                });
        },
        loadList(){//默认加载表格信息
            this.postRequest('/stationmanage/inbound/bus/list',{ page: this.page.currentPage,rows: '10',order: 'desc'})
                .then(target => {
                    console.log(target);
                    this.carData = target.data.list;
                    //页码大小
                    this.page.pageSize = target.data.pageSize;
                    //页码数
                    this.page.pageNumber = target.data.pageNumber;
                    //总页数
                    this.page.total = target.data.totalRow;
                });
        },
        rowChange(val){
            console.log(val);
            this.page.currentPage = val;
            this.loadList();
        },
        renovate(){//点击刷新  刷新接口和默认加载的接口一样
            console.log(this.carData);
            this.carData = [];
            this.page.currentPage = 1;
            this.loadList();
        },
    },
    computed:{},
    watch:{cardCodeTips(){this.getCardMess();}},
    mounted() {
        this.searchCode();
        this.loadList();
        this.$emit("sendActive","2-1");
        this.restaurants = this.loadAll();
        /*改样式  S*/
        $(function() {
            $('.content .el-form-item__label').each(function() { //遍历相同样式名的元素
                var h = $(this).html().length;
                if(h>4){
                    this.style.lineHeight = "20px";
                    this.style.textAlign = "left";
                }
            });
        });
        /*改样式  E*/
        // this.$emit("sendTag",2);
    }
}
</script>
<style scoped src="../../assets/css/inoutManage/getInLogin.css">
</style>
